<template>
	<view class="wrap-top-header" :style="'padding-top: ' + navigationHeight + 'px;'">
		<image class="top-header-bg" mode="widthFix" :src="$staticImagePath('common/top_bg.png')" />

		<view class="wrap-navigation-bar">
			<view class="navigation-back flex align-center just-center" @click.stop="onBack">
				<image class="img" :src="$staticImagePath('common/navigation_black.png')" />
			</view>

			<view class="navigation-title flex align-center just-center f-36">{{ navigationTitle }}</view>
		</view>

		<view class="wrap-search-bar">
			<view class="search-bg flex align-center just-between">
				<view class="location-bg flex align-center"  @click.stop="$jump.go('/pages/home/home/changeCity')">
					<view class="city f-26 limit-num-line">{{ city }}</view>

					<image class="arrow" :src="$staticImagePath('article/arrow_down.png')" />
				</view>

				<input
					class="input f-26"
					placeholder="搜索关键词"
					placeholder-class="place"
					:value="keywords"
					@input="$emit('update:keywords', $event.detail.value)"
				/>

				<view class="search-btn f-26" @click="$emit('onSearch')">搜索</view>
			</view>
		</view>

		<view class="wrap-slot">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 搜索关键词
			 */
			keywords: {
				type: String,
				default: "",
			},
			/**
			 * 导航栏标题
			 */
			navigationTitle: {
				type: String,
				default: "",
			},
			/**
			 * 城市
			 */
			city: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				navigationHeight: this.$navigationHeight - 45,
			};
		},
		methods: {
			/**
			 * 返回
			 */
			onBack() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-top-header {
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 99;
		overflow: hidden;

		.top-header-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			background: transparent;
			z-index: 100;
		}

		.wrap-navigation-bar {
			width: 100%;
			height: 45px;
			overflow: hidden;
			position: relative;
			z-index: 101;

			.navigation-back {
				position: absolute;
				left: 0;
				top: 0;
				width: 45px;
				height: 45px;
				z-index: 102;

				.img {
					width: 35rpx;
					height: 35rpx;
				}
			}

			.navigation-title {
				position: absolute;
				left: 50px;
				top: 0;
				width: calc(100% - 100px);
				height: 45px;
				z-index: 102;
				overflow: hidden;
			}
		}

		.wrap-search-bar {
			width: 100%;
			padding: 25rpx;
			box-sizing: border-box;
			overflow: hidden;
			position: relative;
			z-index: 101;

			.search-bg {
				width: 100%;
				height: 64rpx;
				background-color: white;
				border-radius: 32rpx;
				overflow: hidden;

				.location-bg {
					margin-left: 15rpx;
					height: 26rpx;
					padding: 0 23rpx;
					max-width: 300rpx;
					border-right: 2rpx solid rgba(238, 238, 238, 1);
					gap: 8rpx;

					.city {
						--limit-num: 1;
						color: #121212;
					}

					.arrow {
						width: 20rpx;
						height: 20rpx;
					}
				}

				.input {
					margin-left: 19rpx;
					margin-right: 19rpx;
					flex: 1;
					overflow: hidden;
					color: #121212;
				}

				/deep/ .place {
					color: #bbbbbb;
				}

				.search-btn {
					margin-right: 6rpx;
					width: 115rpx;
					height: 54rpx;
					line-height: 54rpx;
					text-align: center;
					background: linear-gradient(90deg, #dd551b, #f49355);
					border-radius: 27rpx;
					overflow: hidden;
					color: white;
				}
			}
		}

		.wrap-slot {
			width: 100%;
			overflow: hidden;
			position: relative;
			z-index: 101;
		}
	}
</style>
